<template>
  <div class="main-box">
    <BaseTitle title="版权管理">
      <template #right>
        <el-button type="primary" @click="handelAddServe">添加</el-button>
      </template>
    </BaseTitle>
    <div class="search_content">
      <div class="file-type">
        <span>素材类型</span>
        <ButtonTab :tab-list="typeOptions" @change="clickType" size="mini" />
      </div>
      <div class="file-type">
        <span>状态</span>
        <ButtonTab :tab-list="timeOptions" @change="clickTime" size="mini" />
      </div>
    </div>

    <div
      class="file-box"
      ref="fileBox"
      v-resize="monResize"
      v-loading="loading"
    >
      <ul class="file-list" v-show="dataSource.length && !loading">
        <li class="file-card" v-for="(item, index) in dataSource" :key="index">
          <div class="icon-box">
            <BaseImg
              v-if="item.material_cover"
              :src="item.material_cover"
              alt=""
              class="img"
            />
            <div v-else>
              <BaseImg
                v-if="item.type == 1"
                :src="item.material_link"
                alt=""
                class="img"
              />
              <img
                src="~@/assets/icon-video.png"
                alt=""
                v-else-if="item.type == 2"
                class="icon"
              />
              <img
                src="~@/assets/icon-audio.png"
                alt=""
                v-else-if="item.type == 3"
                class="icon"
              />
              <img
                src="~@/assets/icon-word.png"
                alt=""
                v-else-if="item.type == 4"
                class="icon"
              />
            </div>
          </div>
          <h4>{{ item.material_name }}</h4>
          <div class="size-oper">
            <span>{{ typeEnums[item.type] }}</span>
            <el-dropdown @command="handleCommand($event, item)" trigger="click">
              <i class="el-icon-more"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="edit">编辑</el-dropdown-item>
                <el-dropdown-item command="del">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </li>
        <li
          class="file-card none"
          v-for="none in occupant"
          :key="none + 99999"
        ></li>
      </ul>
      <div v-show="dataSource.length">
        <el-button @click="getMore" class="center-btn" v-if="isMore">
          加载更多
        </el-button>
        <el-button class="center-btn" v-else>没有了</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import copyrightApi from '@/api/copyright'
import { typeEnums, timeEnums } from '@/enums/copyright'
export default {
  data() {
    return {
      typeOptions: [
        { value: '0', label: '全部' },
        { value: '1', label: '图片' },
        { value: '2', label: '视频' },
        { value: '3', label: '音频' },
        { value: '4', label: '字体' }
      ],
      timeOptions: [
        { value: '0', label: '全部' },
        { value: '1', label: '未开始' },
        { value: '2', label: '生效中' },
        { value: '3', label: '已过期' }
      ],
      isMore: false,
      occupant: [],
      loading: false,
      checkList: [],
      typeEnums,
      timeEnums,
      dataSource: [],
      addShow: false,
      val: {},
      searchForm: {
        type: 0,
        status: 0,
        material_name: ''
      },
      offWidth: '',
      page: {
        total: 0,
        page: 1,
        limit: 25
      } // 分页器
    }
  },
  watch: {
    offWidth: {
      handler(data) {
        const length = Math.floor(data / 200) - 2
        this.occupant = []
        for (let i = 0; i < length; i++) {
          this.occupant.push(i)
        }
        this.loading = false
      }
    }
  },
  created() {
    this.getListData()
  },

  methods: {
    clickType(type) {
      this.searchForm.type = type
      this.page.page = 1
      this.getListData()
    },
    clickTime(status) {
      this.searchForm.status = status
      this.page.page = 1
      this.getListData()
    },
    // 监听dom变化，计算每行排列几个
    monResize() {
      this.$nextTick(() => {
        this.offWidth = this.$refs.fileBox.offsetWidth
      })
    },
    getMore() {
      this.loading = true
      const true_total = this.page.limit * this.page.page
      if (this.page.total > true_total) {
        this.page.page = this.page.page + 1
        this.getListData()
      }
    },
    handleCommand(key, row) {
      switch (key) {
        case 'edit':
          this.handelAddServe(row)
          break
        case 'del':
          this.goDelete(row)
          break
      }
    },
    search() {
      this.page.page = 1
      this.getListData()
    },
    handelAddServe(row = {}) {
      this.$router.push({
        name: 'addCopyright',
        query: {
          id: row.copyright_id
        }
      })
    },
    async getListData() {
      this.loading = true
      const params = {
        ...this.searchForm,
        page: this.page.page,
        limit: this.page.limit
      }
      const res = await copyrightApi.copyrightList({ ...params })
      if (res.code == 0) {
        this.page.total = res.count
        if (this.page.page == 1) {
          this.dataSource = res.data
        } else {
          this.dataSource = [...this.dataSource, ...res.data]
        }
        const true_total = this.page.limit * this.page.page
        if (this.page.total > true_total) {
          this.isMore = true
        } else {
          this.isMore = false
        }
      }
    },
    async goDelete(row) {
      const result = await this.$confirm(
        '此操作将永久删除该数据，是否继续?',
        this.$t('提示'),
        {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        }
      ).catch(() => {})
      if (result == 'confirm') {
        const res = await copyrightApi.deleteCopyright({
          detail_id: [row.detail_id]
        })
        if (res.code == 0) {
          this.getListData()
          this.$message.success(res.msg)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.file-type {
  margin-bottom: 8px;
  margin-right: 16px;
  span {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #86909c;
    line-height: 20px;
    margin-right: 18px;
  }
}
.file-box {
  margin-top: 16px;
  .file-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: space-between;

    .file-card {
      display: inline-block;
      width: 200px;
      height: 200px;
      margin-bottom: 20px;
      border: 1px solid #f3f5f8;
      box-sizing: border-box;
      border-radius: 4px;

      .icon-box {
        background-color: #f8f9fb;
        text-align: center;
        overflow: hidden;
        height: 140px;
        line-height: 140px;
        .img {
          max-width: 100%;
          max-height: 100%;
          border-radius: 4px 4px 0 0;
        }
        .icon {
          width: 64px;
          height: 64px;
          margin-top: 38px;
        }
      }
      h4 {
        padding: 9px 9px 0;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 21px;
      }
      .size-oper {
        padding: 0 9px;
        width: 100%;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #8291a9;
        line-height: 21px;
        display: flex;
        justify-content: space-between;
        .el-icon-more {
          color: #8291a9;
          cursor: pointer;
        }
      }
    }
    .file-card.none {
      height: 0;
      border: none;
      background-color: #f00;
      margin: 0;
    }
  }
  .center-btn {
    margin: 0 auto;
    display: block;
  }
}

.form-item {
  margin-bottom: 5px;
}
.el-image {
  height: 200px;
  width: 100%;
}
.card-box {
  border: 1px solid #eee;
  padding: 20px;
  position: relative;
  p {
    font-size: 14px;
    padding-top: 10px;
  }
  .tools {
    position: absolute;
    right: 20px;
    bottom: 20px;
    i {
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.search_content {
  display: flex;
  align-items: center;
}
</style>
